<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategy.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="找攻略">
            </div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab"
    role="tablist">
    <li class="nav-item">
        <a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
            <span style="font-weight: bold;">推荐</span>
        </a>
    </li>
    <!--地区的页签拼接处-->
</ul>
<!--攻略推荐-->
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade active show" id="pills-top">
        <div id="commend" class="carousel slide">
            <div class="carousel-inner" render-loop="list">
                <div class="container commend carousel-item">
                    <a href="/travelContent.html?id=" render-fun="setHref" render-key="list.travelId">
                        <img render-src="list.commendCoverUrl">
                        <p render-html="commendTitle"></p>
                    </a>
                </div>
            </div>
            <a class="carousel-control-prev" href="#commend" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="carousel-control-next" href="#commend" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
        <hr>
        <div class="container strategyCommend">
            <h6>当季推荐</h6>
            <div class="row hot" render-loop="list">
                <div class="col-4">
                    <a href="/strategyCatalogs.html?id=" render-fun="setHref" render-key="list.id">
                        <img render-src="list.coverUrl">
                        <p render-html="list.title"></p>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="tab-pane fade" id="pills-1"></div>-->
</div>

<script>


    //攻略推荐
    $.get("/travels/selectCommend", {"type": 3}, function (data) {
        $("#commend").renderValues(data, {
            setHref: setHref
        });
        $(".carousel-item:first").addClass("active");
    }, "json");
    //当季推荐
    $.get("/strategies", {"state": 2, "pageSize": 0}, function (data) {
        $(".strategyCommend").renderValues(data, {
            setHref: setHref
        })
    }, "json");
    //页签和包含内容的div
    $.get("/regions/1/strategies", function (data) {
        var html = "";
        var pills = "";
        $.each(data, function (index, ele) {
            html += '<li class="nav-item"><a data-id="' + ele.id + '" class="nav-link" id="pills-' + ele.id + '-tab" data-toggle="pill" href="#pills-' + ele.id + '">' + ele.name + '</a></li>';
            pills += '<div class="tab-pane fade" id="pills-' + ele.id + '"></div>';
        })
        $("#pills-tab").append(html);
        $("#pills-tabContent").append(pills);
    }, "json")

    var id;//将地区的id定义在事件外面，以供后面的请求使用
    //动态绑定点击事件
    $("#pills-tab").on("click", ".nav-link", function () {
        currentPage=2;
        totalPage=2;
        id = $(this).data("id");
        if (id) {
            //访问生成页面的接口
            $.get("/regions/strategies", {"regionId": id}, function (data) {
                $("#pills-" + id).html(data);
            }, "html")
        }
    });


    //加载第二页的数据(第一页的数据由模板输出)
    var currentPage = 2;
    var totalPage = 2;//临时的总页数,先设值成2,防止第一次翻页无法进行
    function goPage() {
        $.get("/regions/strategies", {"regionId": id, "currentPage": currentPage}, function (data) {
            //使用定义了的变量进行运算操作，必须赋予初始值
            var html='';
            $.each(data.list, function (index, ele) {
                html += '<div class="col-6 mb">' +
                            '<a href="/strategyCatalogs.html?id=' + ele.id + '">' +
                                '<img class="float-left" src="' + ele.coverUrl + '">' +
                                '<div class="classify-text">' +
                                    '<span>' + ele.subTitle + '</span>' +
                                    '<p>0人收藏</p>' +
                                '</div>' +
                            '</a>' +
                        '</div>';
            });
            //拼接在全部攻略对应的div中
            $(".classify").append(html);
            currentPage+=1;
            totalPage = data.pages;
        }, "json")
    }

    //监视屏幕滚动，到达页尾开始翻页
    $(window).scroll(function () {
        //在推荐页时不进行操作
        if (id) {
            if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
                //防止无限翻页
                if (currentPage <= totalPage) {
                    console.log("翻页");
                    //加载第二页的数据
                    goPage();
                }
            }
            //数据加载完毕，停止翻页
            if ($(window).height() + $(window).scrollTop() >= $(document).height() & currentPage > totalPage) {
                $(document).dialog({
                    type: 'notice',
                    infoText: '到底啦，扑街仔！',
                    autoClose: 2500,
                    position: 'bottom'  // center: 居中; bottom: 底部
                });
            }
        }
    })

    $(".searchBtn").keydown(function(event) {
        if(event.keyCode==13){
            var keyword = $(".searchBtn").val();
            $.get("/search", {"keyword": keyword, "type": "strategies"}, function (data) {
                var result = JSON.stringify(data);
                sessionStorage.setItem("result",result);
                location.href = "/searchResult.html";
            })

        }
    })
</script>

</body>

</html>